<template>
  <el-table :data="tableData" stripe height-max="465">
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="name" label="账号" />
    <el-table-column prop="permissions" label="权限" />
    <el-table-column align="right" class="right">
      <template #default="scope">
        <el-button size="small" @click="ment(scope.row, scope.row.name)"
          >修改</el-button
        >
        <el-button size="small" type="danger" @click="deles(scope.row.id)"
          >删除</el-button
        >
      </template>
      <template #header>
        <span>权限管理</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { management, deletesuname } from "../axios/http";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
const store = useStore();
interface User {
  id: number;
  name: string;
  permissions: string;
}

const tableData = ref<User[]>([
  {
    id: 1,
    name: "",
    permissions: "",
  },
]);
onMounted(async () => {
  const arr = await management();
  tableData.value = arr.data;
});
// 监听
watch(
  () => store.state.deleteflag,
  async () => {
    const arr = await management();
    tableData.value = arr.data;
  }
);
//修改
function ment(info: object, name: string) {
  if (store.state.info.permissions == "超级管理员") {
    store.commit("rig");
    store.commit("information", info);
    localStorage.setItem("name", name);
  } else {
    ElMessage({
      message: "请使用超级管理员",
      type: "warning",
    });
  }
}
// 删除
async function deles(id: string) {
  if (store.state.info.permissions == "超级管理员") {
    await deletesuname(id);
    store.commit("deletebool");
  } else {
    ElMessage({
      message: "请使用超级管理员",
      type: "warning",
    });
  }
}
</script>
<style scoped lang="less"></style>
